<template>
  <div class="box-container">
    <div class="loader-wrapper">
      <div class="truck-wrapper">
        <div class="truck">
          <div class="truck-container"></div>
          <div class="glases"></div>
          <div class="bonet"></div>
          <div class="base"></div>
          <div class="base-aux"></div>
          <div class="wheel-back"></div>
          <div class="wheel-front"></div>
          <div class="smoke"></div>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>
// import { Vue3Lottie } from "vue3-lottie";
import { onMounted, ref } from 'vue'
import { useRoute,useRouter } from "vue-router";
import { getTokenByAuthCode } from "@/api/auth";
import Cookies from "js-cookie";
// import { encrypt, decrypt } from "@/utils/jsencrypt";
import useUserStore from '@/stores/modules/user'
import { setToken } from '@/utils/auth'
const userStore = useUserStore()
const route = useRoute();
// const router = useRouter();
// const { proxy } = getCurrentInstance();
import { ElMessage } from 'element-plus'
onMounted(() => {
})

/**
 * 当前页面：过渡页面，获取到了authCode
 * 根据authCode获取Token
 */
function handleLogin() {
  const params = {
    corpId: route.query.corpId,
    authCode: route.query.authCode
  }
  userStore.getTokenByAuthCodeAction(params).then((response) => {
    console.log('token获取成功');
    // user.ts:getTokenByAuthCode -> resolve()回调 -> 进入当前块
    // router.push({ path: '/transportOrderManagement/transportOrderList' });
  }).catch((err) => {
    // user.ts:getTokenByAuthCode -> reject()回调 -> 进入当前catch块
    // ElMessage({ message: err, type: 'error', duration: 2000 })
    // 进入第三方网站系统重头再来
    setTimeout(() => {
    }, 2000)
  });
}


handleLogin()
</script>
<style scoped lang="scss">
@keyframes spin {
  50% {
    top: 81px;
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes container {
  30% {
    transform: rotate(1deg);
  }
  50% {
    top: 11px;
  }
  70% {
    top: 10px;
    transform: rotate(-1deg);
  }
}
.truck>.smoke {
  position: absolute;
  background-color: #AFBDC3;
  border-radius: 100%;
  width: 8px;
  height: 8px;
  top: 90px;
  left: 6px;
  animation: fade 0.4s linear infinite;
  opacity: 0;
}
.truck>.smoke:after {
  content: '';
  position: absolute;
  background-color: RGB(143, 163, 173);
  border-radius: 100%;
  width: 6px;
  height: 6px;
  top: -4px;
  left: 4px;
}
.truck>.smoke:before {
  content: '';
  position: absolute;
  background-color: RGB(143, 163, 173);
  border-radius: 100%;
  width: 4px;
  height: 4px;
  top: -2px;
  left: 0px;
}
@keyframes fade {
  30% {
    opacity: 0.3;
    left: 7px;
  }
  50% {
    opacity: 0.5;
    left: 6px;
  }
  70% {
    opacity: 0.1;
    left: 4px;
  }
  90% {
    opacity: 0.4;
    left: 2px;
  }
}
@keyframes bg {
  from {
    background-position-x: 0px;
  }
  to {
    background-position-x: -400px;
  }
}
@keyframes updown {
  50% {
    transform: translateY(-20%);
  }
  70% {
    transform: translateY(-10%);
  }
}
@keyframes updown-half {
  50% {
    transform: translateY(-10%);
  }
  70% {
    transform: translateY(-5%);
  }
}
</style>
